<template>
  <div>
    <h1>这是 Dept 组件</h1>
    {{ info }}

    <el-table
        :data="tableData"
        border
        style="width: 20%">
      <el-table-column
          prop="DEPT_NO"
          label="部门号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="DEPT_NAME"
          label="部门名">
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
  const axios = require('axios');
  export default {
    data() {
      return {
        info: null,
        loading: true,
        errored: false,
        tableData: []
      };
    },
    mounted() {
      axios
          .get('http://127.0.0.1:18001/jdbc/test/queryDept')
          .then(response => {
            this.info = response.data
            //渲染表格
            this.tableData = response.data
          })
          .catch(error => {
                alert('无法获取DEPT数据')
                this.errored = true
              }
          )
          .finally(() => this.loading = false)
    },
    methods: {},
  };
</script>

<style scoped>
</style>
